/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import { TextInput, View, Dimensions, TouchableHighlight, StyleSheet, Image } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { Icon,  List, Button, InputItem, Tabs, TextareaItem, DatePicker, Accordion, Picker, Switch, Carousel } from 'antd-mobile-rn';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader } from '../library/comp';
import { Dialog, Http, PageBase } from '../library/func';
import Design from '../design';
import Config from '../config';

//code push
import codePush from 'react-native-code-push';
//极光推送
import JPushModule from 'jpush-react-native'
import { Toast } from 'native-base';


/**************************************************************************************** Pageload */
const pageload = function(param) {
    return {
        url: "page/home/home.php",
        pipe: Config.pipe.page.loading,
        scene: Design.scene.page.default,
        empty(data) {
            return false;
        }
    };
}

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class Index extends PageBase {
	constructor(props) {
        super(props);
        this.logic = {pageload};
        this.state = {
            scene: Design.scene.page.default.loading,
            data: null,
            updateprogress:0
        }
    }
    
    /************************************************************************************ Life */
    /**
     * didMount
     */
    componentDidMount(){

        // 关闭启动画面
        SplashScreen.hide();

        // 页面加载
        this.pageload();

        //ON_NEXT_RESTART 下次启动后
        //IMMEDIATE  本次强制

        codePush.sync({
            updateDialog: {
                mandatoryContinueButtonLabel:'更新',
                mandatoryUpdateMessage:'有新版本了，请您及时更新',
                optionalIgnoreButtonLabel: '稍后',
                optionalInstallButtonLabel: '后台更新',
                optionalUpdateMessage: '有新版本了，是否更新？',
                title: '更新提示'
            },
            installMode: codePush.InstallMode.IMMEDIATE 
        },
        (status) => {
            switch (status) {
                case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                    // Show "downloading" modal
                    break;
                case codePush.SyncStatus.INSTALLING_UPDATE:
                    // Hide "downloading" modal
                    break;
            }
        },
        ({ receivedBytes, totalBytes, }) => {
            this.setState({
                updateprogress:receivedBytes/totalBytes,
            });
            /* Update download modal progress */
        }        
        );


        // codePush.sync(
        //     { updateDialog: false, installMode: codePush.InstallMode.IMMEDIATE },//无对话框，立即启动更新
        //     (status) => {
        //       switch (status) {
        //         case codePush.SyncStatus.UPDATE_IGNORED:
        //           //console.log('ignored')
        //           break;
        //         case codePush.SyncStatus.DOWNLOADING_PACKAGE:
        //           //console.log('download')
        //           this.setState({show: true})
        //           break;
        //         case codePush.SyncStatus.INSTALLING_UPDATE:
        //           //console.log('installing')
        //           this.setState({show: false})
        //           break;
        //       }
        //     },
        //     ({ receivedBytes, totalBytes, }) => {
        //         //可见监控到更新进度  receivedBytes
        //     }
        // );


        //极光推送
        JPushModule.initPush();
        JPushModule.notifyJSDidLoad((res) => {});
        JPushModule.addReceiveOpenNotificationListener((map) => {
            Dialog.text(JSON.stringify(map), 1);
            console.log(map);
        })

    }

    /************************************************************************************ Func */
    // success
    $success() {
        return (
            <CScroll mb='100' mt='90' bg='#efeff4'>

                {/* 轮播图 */}
                <Carousel
                    autoplay
                    infinite
                    autoplayInterval={2000}
                    style={{backgroundColor:'#fff'}}
                >

                    {/* 循环banner */}
                    {this.state.data.banner.map((item,index)=>{
                        return(
                            <CRow key={index} style={{flex:1}}>
                                <CImage source={{uri: Config.url.image + 'banner/' + item.object.set_image }} h='400' w='750' />
                            </CRow>
                        )
                    })}
                </Carousel>

                {/* 智慧社区标题 */}
                <CRow bg='#fff' h='100' y='center' pa='20' pl='30'>
                    <CText size='32'>测试一下·热更新的询问更新，智慧社区{ this.state.updateprogress }</CText>
                </CRow>

                {/* 各类 */}
                <CRow bg='#fff' pt='20' pb='26'>

                    {/* <CHand f='1' x='center' onPress={(e)=> { this.nav.navigate('Service_Fees'); }}> */}
                    <CHand f='1' x='center' onPress={(e)=> { this.nav.navigate('Service_Fees'); }}>
                        <CItemY f='1' x='center'>
                            <CIcon color="#ea9518" width="28" height="28" my='2' icon={ Design.icon["server-fee"] }></CIcon>
                            <CText group={ Design.global.serviceItemText }>物业缴费</CText>
                        </CItemY>
                    </CHand>

                    <CHand f='1' x='center' onPress={(e)=> { this.nav.navigate('Service_Report'); }}>
                        <CItemY f='1' x='center'>
                            <CIcon color="#59aaff" width="30" height="30" icon={ Design.icon["server-xiu"] }></CIcon>
                            <CText group={ Design.global.serviceItemText }>报修</CText>
                        </CItemY>
                    </CHand>

                    <CHand f='1' x='center' onPress={(e)=> {
                            this.nav.navigate('Service_Gateway');
                            // Dialog.text('您所在的小区暂未开启此功能', 1);
                        }}>
                        <CItemY f='1' x='center'>
                            <CIcon color="#3cba6a" width="30" height="30" icon={ Design.icon["server-door"] }></CIcon>
                            <CText group={ Design.global.serviceItemText }>一键开门</CText>
                        </CItemY>
                    </CHand>

                    <CHand f='1' x='center' onPress={(e)=> {
                            // this.nav.navigate('User_Setting_House');
                            Dialog.text('您所在的小区暂未开启此功能', 1);
                        }}>
                        <CItemY f='1' x='center'>
                            <CIcon color="#2ca2df" width="30" height="30" icon={ Design.icon["server-room-make"] }></CIcon>
                            <CText group={ Design.global.serviceItemText }>我的房屋</CText>
                        </CItemY>
                    </CHand>

                </CRow>

                <CRow bg='#fff' pt='16' pb='46'>

                    <CHand f='1' x='center' onPress={(e)=> {
                            this.nav.navigate('Service_Visitor');
                            // Dialog.text('您所在的小区暂未开启此功能', 1);
                        }}>
                        <CItemY f='1' x='center'>
                            <CSvg width="30" height="30" icon={ Design.svg["server-rekou"] }></CSvg>
                            <CText group={ Design.global.serviceItemText }>访客通行</CText>
                        </CItemY>
                    </CHand>   

                    <CHand f='1' x='center' onPress={(e)=> {
                            this.nav.navigate('User_Setting_Car');
                            // Dialog.text('您所在的小区暂未开启此功能', 1);
                        }}>
                        <CItemY f='1' x='center'>
                            <CSvg width="30" height="30" icon={ Design.svg["server-makecleancar"] }></CSvg>
                            <CText group={ Design.global.serviceItemText }>我的车辆</CText>
                        </CItemY>
                    </CHand>

                    <CHand f='1' x='center'onPress={(e)=> {
                            // this.nav.navigate('User_List_Bill');
                            Dialog.text('您所在的小区暂未开启此功能', 1);
                        }}>
                        <CItemY f='1' x='center'>
                            <CIcon color="#fdb368" width="30" height="30" icon={ Design.icon["server-moneylist"] }></CIcon>
                            <CText group={ Design.global.serviceItemText }>帐单</CText>
                        </CItemY>
                    </CHand>

                    <CHand x='center' f='1' active={0.6} onPress={(e)=> { this.nav.navigate('Service'); }}>
                        <CItemY f='1' x='center'>
                            <CIcon icon={ Design.icon["index-more"] } color='#999' w='46' h='46'  />
                            <CText group={ Design.global.serviceItemText }>更多</CText>
                        </CItemY>
                    </CHand>
                </CRow>

                {/* 精选推荐标题 */}
                <CRow mt='20' bg='#fff' pa='30' pb='0'>
                    <CText size='32'>精选推荐</CText>
                </CRow>

                {this.state.data.article.map((item,index)=>{

                    switch(item.set_showtype){
                        case 1:
                            return(
                                <CRow key={index} group={ Design.global.articleList }>
                                    <CItemY>
                                        <CText ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</CText>
                                        <CImage source={{uri: Config.url.image+"article/"+item.object.set_image }} mt='10' style={{width:Config.map.screen.width-30,height:130}}/>
                                    </CItemY>
                                </CRow>
                            );
                            break;
                        case 2:
                            return(
                                <CRow key={index} group={ Design.global.articleList }>
                                    <CHand f='1'>
                                        <CText ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</CText>
                                    </CHand>
                                    <CHand f='1' x='right'>
                                        <CImage source={{uri: Config.url.image+"article/"+item.object.set_image }} style={{width:160, height:80}}/>
                                    </CHand>
                                </CRow>
                            );
                            break;
                        case 3:
                            return(
                                <CRow key={index} group={ Design.global.articleList }>
                                    <CItemY f='1'>
                                        <CText ellipsizeMode='tail' numberOfLines={2}>{item.set_title}</CText>
                                        <CHand pt='20' x='between' f='1'>
                                            {
                                                item.object.set_image.map((img,imgindex)=>{
                                                    const marginRight = imgindex == 0 ? 6 : 0;
                                                    const marginLeft = imgindex == 2 ? 6 : 0;
                                                    return(
                                                        <CHand key={imgindex}>
                                                            <Image source={{uri: Config.url.image+"article/"+img }} style={{
                                                                width: 106, 
                                                                height: 60, 
                                                                marginLeft,
                                                                marginRight
                                                            }} />
                                                        </CHand>
                                                    );
                                                })
                                            }

                                        </CHand>
                                    </CItemY>
                                </CRow>
                            );
                            break;
                    }
                })}

            </CScroll>
        );
    }
    // render
	render() {
        const Scene = this.state.scene.bind(this);
		return (
			<CPage>

                {/* 场景 */}
                <Scene></Scene>

                {/* 头部 */}
                <CHeader h='90' bg='#fff' px='20' bb='1 solid #e6e6e6'>
                    <CRow f='1' > 
                        <CItemX y='center'>
                            <CIcon color="#8c8c8c" width="20" height="20" icon={ Design.icon["index-location"] }></CIcon>
                            <CText color='#626262' size='24' pl='10'>珑城花园</CText>
                        </CItemX>
                    </CRow>
                    <CItemX x='right' y='center' h='90' >
                        <CHand mr='15' onPress={(e)=> {
                            Dialog.text('此功能暂未启用', 1);
                        }}>
                            <CIcon color="#8c8c8c" width="20" height="20" icon={ Design.icon["index-saoyisao"] }></CIcon>
                        </CHand>
                        <CHand onPress={(e)=> {
                            this.nav.navigate('Help');
                        }}>
                            <CIcon color="#8c8c8c" width="20" height="20" icon={ Design.icon["index-help"] }></CIcon>
                        </CHand>
                    </CItemX>
                </CHeader>
				
				{/* 底部 */}
				<PTabbar current='Home' nav={this.nav}></PTabbar>

			</CPage>
		);
	}
}
